<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <PageTools ref="pagetool" @query="queryList">
          <template #before>
            <el-button type="primary" plain @click="addFn">添加经纪</el-button>
          </template>
        </PageTools>
        <el-divider />
        <div>
          <el-table
            border
            width="180"
            style="width: 100%"
            :data="tableData"
            class="distance"
          >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="100"
            />
            <el-table-column
              label="封面"
              prop="image"
              align="center"
            >
              <template v-slot="{row}">
                <el-image :src="row.image" style="width:120px;height:120px;object-fit:contain" />
              </template>
            </el-table-column>
            <el-table-column
              label="名称"
              prop="name"
              align="center"
            />
            <el-table-column
              label="邮箱"
              prop="email"
              align="center"
            />
            <el-table-column
              label="电话"
              prop="phone"
              align="center"
            />
            <el-table-column
              label="地址"
              prop="address"
              align="center"
            />
            <el-table-column
              label="介绍"
              prop="desc"
              align="center"
            />
            <el-table-column
              label="操作"
              align="center"
              width="180"
            >
              <template v-slot="{row}">
                <el-button type="primary" size="small" plain @click="editFn(row.id)">编辑</el-button>
                <el-button type="danger" size="small" plain @click="deleteFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
            </el-table-column></el-table>
          <el-divider />
          <!-- 分页器 -->
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <el-pagination
              background=""
              layout="prev, pager, next"
              :page-size="limit"
              :total="total"
              @current-change="pageChange"
            />
          </el-row>
        </div>
        <!-- 弹窗组件 -->
        <ShowDialog ref="dialogForm" :show-dialog.sync="isShow" @updateEvent="loadList" />
      </el-card>
    </div>
  </div>
</template>

<script>
import ShowDialog from './components/showDialog.vue'
import { getMangerList, getLisyNum, deleteManger, getDetailById } from '@/api/managerList'
export default {
  components: {
    ShowDialog
  },
  data() {
    return {
      tableData: [],
      isShow: false,
      total: 0,
      limit: 5, // 每页长度
      start: 0 // 开始获取的下标
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    // 获取经纪列表
    async loadList() {
      const res = await getMangerList({ _limit: this.limit, _start: this.start, name_contains: this.value })
      // console.log(81, res)
      const num = await getLisyNum()
      this.total = num.data
      this.tableData = res.data
    },
    // 新增经纪
    addFn() {
      this.isShow = true
    },
    // 页码改变刷新页面
    // 当最后一页剩一条数据点击删除时无法跳转到上一页，未实现《《《《《《-------------------------------------------》》》》》》》
    async pageChange(newP) {
      this.start = (newP - 1) * this.limit
      await this.loadList()
    },
    // 编辑
    async editFn(id) {
      this.isShow = true
      this.$refs.dialogForm.ruleForm.id = id
      const res = await getDetailById(id)
      this.$refs.dialogForm.ruleForm = res.data
      // 照片回填
      this.$refs.dialogForm.fileList.push({ url: res.data.image })
    },
    // 删除
    async deleteFn(id) {
      this.$confirm('确定删除此经纪吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteManger(id)
        if (this.tableData.length === 1 && this.start >= this.limit) {
          this.start -= this.limit
        }
        this.loadList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询
    async queryList() {
      const value = this.$refs.pagetool.value
      const res = await getMangerList({ _limit: this.limit, name_contains: value || null })
      this.total = res.data.length
      this.tableData = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.distance{
  margin-top: 30px;
}
</style>
